import { KonvaEventObject } from 'konva/lib/Node';
import React from 'react';
import { Layer, Rect, Text } from 'react-konva';


type HanziCardProps = {
  x: number;
  y: number;
  c: string;
  onDragEnd?: (e: KonvaEventObject<DragEvent>) => void;
  onDragMove?: (e: KonvaEventObject<DragEvent>) => void;
  onMouseEnter?: (e: KonvaEventObject<MouseEvent>) => void;
  onMouseLeave?: (e: KonvaEventObject<MouseEvent>) => void;
};

export default class HanziCard extends React.Component<HanziCardProps> {
  constructor(props: HanziCardProps) {
    super(props);
  }

  handDragEnd = (e: KonvaEventObject<DragEvent>) => {
    const { onDragEnd } = this.props;
    if (onDragEnd) {
      onDragEnd(e);
    }
  };

  handleMouseEnter = (e: KonvaEventObject<MouseEvent>) => {
    const { onMouseEnter } = this.props;
    if (onMouseEnter) {
      onMouseEnter(e);
    }
  };

  handleMouseLeave = (e: KonvaEventObject<MouseEvent>) => {
    const { onMouseLeave } = this.props;
    if (onMouseLeave) {
      onMouseLeave(e);
    }
  };

  handleDragMove = (e: KonvaEventObject<DragEvent>) => {
    const { onDragMove } = this.props;
    if (onDragMove) {
      onDragMove(e);
    }
  };

  render() {
    const { x, y, c } = this.props;
    return (
      <Layer
        x={x}
        y={y}
        width={150}
        height={150}
        draggable
        onDragEnd={(e) => this.handDragEnd(e)}
        onMouseEnter={(e) => this.handleMouseEnter(e)}
        onMouseLeave={(e) => this.handleMouseLeave(e)}
        onDragMove={(e) => this.handleDragMove(e)}
      >
        <Rect width={150} height={150} stroke="silver" fill="aliceblue" cornerRadius={4} />
        <Text text={c} fontSize={75} x={37} y={37} />
      </Layer>
    );
  }
}
